<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>男款</title>
    <!-- 引入bootstrap.css  ctrl+/ -->
    <link rel="stylesheet" href="/boot/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/boot/plugins/jquerypage/css/zxf_page.css">
    <style>
        .thumbnail:hover{
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            transition: 0.3s box-shadow
        }
        body{
            padding-top: 52px;
        }
        #nav_img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            padding: 2px;
        }
    </style>
</head>
<body>
<!-- 导航begin -->
<div class="container-fluid">
    <div class="row">
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header ">
                    <div class="navbar-header ">
                        <a href="index.html"><img src="/boot/imgs/logo.png"></a>
                    </div>
                    <ul class="nav navbar-nav">
                        <li><a href="../index.html">首页</a></li>
                        <li><a href="indexn.html">男鞋</a></li>
                        <li><a href="indexv.html">女鞋</a></li>
                    </ul>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active logins"><a href="#"></a></li>
                        <li class="no_login login_in"><a href="login.html" data-toggle="modal" data-target="#myModal">登录</a></li>
                        <li class="no_login"><a href="login.html">注册</a></li>
                        <li class="logins"><a href="car.html">我的订单</a></li>
                        <li class="logins"><a href="car.html">我的购物车 <span class="glyphicon glyphicon-shopping-cart"></span></a></li>
                        <li class="logins login_out"><a href="#">安全退出</a></li>
                        <li class="logins"><img id="nav_img" src="../imgs/tx.jpg"></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
<!-- 导航end  ctrl+/ -->

<!--轮播图-->
<div class="container">
    <div class="row">
        <div id="myCarousel" class="carousel slider">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="/boot/imgs/d1.jpg" alt="First slide">
                </div>
                <div class="item">
                    <img src="/boot/imgs/d5.jpg" alt="Second slide">
                </div>
                <div class="item">
                    <img src="/boot/imgs/d3.jpg" alt="Third slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel"
               data-slide="prev"></a>
            <a class="carousel-control right" href="#myCarousel"
               data-slide="next"></a>
        </div>
    </div>
</div>
<!--轮播图end-->

<!--    搜索框-->
<div class="container" style="margin-top: 20px">
    <div class="row">
        <form class="bs-example bs-example-form" role="form">
            <div class="row">
                <div class="col-md-4" style="margin-left: 0px">
                    <div class="input-group">
                        <input id="name" type="text" class="form-control" placeholder="请输入产品名称">
                        <span class="input-group-btn">
                        <button class="btn btn-default" id="search_btn" type="button">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
        </form>
    </div>
</div>
<!--    搜索框 - end-->
<div class="container" style="margin-top: 20px">
    <div class="row" id="outer">

    </div>
</div>

<!--    翻页-->
<div class="container">
    <div class="row" id="page_div">

    </div>
</div>


<!-- 因为bootstrap依赖于jquery,必须先引入jquery -->
<script src="/boot/plugins/jquery/jquery.min.js"></script>
<!-- 引入bootstrap.js -->
<script src="/boot/plugins/bootstrap/js/bootstrap.js"></script>
<script src="/boot/plugins/jquerypage/js/zxf_page.js"></script>

<script>

    $(function(){
        let page_div = document.querySelector("#page_div")
        page_div.innerHTML=`<div class="zxf_pagediv"></div>`
        //发送请求到后端,拿到所有的数据
        $.get('/boot/phone/index?name='+'男',function(res){
            console.log(res)
            //获取数据
            let arr = res.data.list
            //调用
            display_pro(arr)

            let name = $("#name").val();
            //渲染分页插件
            //翻页begin
            $(".zxf_pagediv").createPage({
                pageNum: res.data.pages,
                current: 1,
                backfun: function (e) {
                    console.log(e);//回调
                    //获取搜索框数据

                    $.get('/boot/phone/index', {pageNow: e.current, name: name}, function (res) {
                        //获取数据
                        let arr = res.data.list
                        //调用
                        display_pro(arr)
                    })
                }
            });
            //翻页endx


        })
    })

    //定义一个方法
    //将arr数据渲染到outer的div中
    function display_pro(arr){
        let outer = document.querySelector("#outer");
        //获取数据
        //定义一个字符串
        let str = ``;
        //遍历arr
        for(let i=0;i<arr.length;i++){
            str+=`
                    <div class="col-sm-6 col-md-3">
                         <div class="thumbnail">
                         <a href="shoplist.html" style="text-decoration: none">
                         <img src="/boot/imgs/${arr[i].imgUrl}"
                             alt="">
                              <div class="caption">
                                <h3>${arr[i].name}</h3>
                                <p style="color: #ff6700">价格: ${arr[i].stock}</p>
                            </div>
                             </a>

                         </div>
                    </div>
                    `;
        }
        outer.innerHTML = str;
    }

    $(function(){
        $("#search_btn").click(function(){
            let page_div = document.querySelector("#page_div")
            page_div.innerHTML=`<div class="zxf_pagediv"></div>`
            //---
            let name = $("#name").val()
            $.get('/boot/phone/index?name='+name,function(res){
                let arr = res.data.list
                //调用
                display_pro(arr)

                //渲染分页插件
                //翻页begin
                $(".zxf_pagediv").createPage({
                    pageNum: res.data.pages,
                    current: 1
                    ,backfun: function(e) {
                        console.log(e+"===查询-load===");//回调
                        //获取搜索框数据
                        let name = $("#name").val();
                        //e.current
                        $.get('/boot/phone/index',{pageNow:e.current,name:name},function(res){
                            //获取数据
                            let arr = res.data.list
                            //e.pageNum = res.data.pages
                            //调用
                            display_pro(arr)
                        })
                    }
                });
                //翻页end
            })
            //----
        })
    })

    //检测本地存储uname - username
    $(function(){
        //从本地存储中去获取
        let uname = localStorage.getItem("uname")
        //未登录
        let lis = document.querySelectorAll(".no_login");
        //登录
        let lios = document.querySelectorAll(".logins");
        if(uname==null){
            for(let i=0;i<lis.length;i++){
                lis[i].style.display="";
            }

            for(let i=0;i<lios.length;i++){
                lios[i].style.display="none"
            }

        }else{

            for(let i=0;i<lis.length;i++){
                lis[i].style.display="none";
            }

            for(let i=0;i<lios.length;i++) {
                if (i == 0) {
                    lios[i].children[0].innerHTML = uname
                }
                lios[i].style.display = ""
            }

        }
    })


    $(function(){
        $(".login_out").click(function(){
            localStorage.clear();
            location.reload();
        })})

    $(function(){
        $(".login_in").click(function(){
            window.location='/boot/views/users/login.html'
        })})

</script>
</body>
</html>